/**
* Copyright (c) 2016 Mirantis Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*    http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
* implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

@import "settings.less";

// ICONS

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: .7;
  margin: 0px 6px;
}

.user-icon {
  @width: 12px;
  @height: 12px;
  &::before {
    .user--icon(@width, @height, escape(@base));
  }
}

.password-icon {
  @width: 13px;
  @height: 16px;
  &::before {
    .password--icon(@width, @height, escape(@base));
  }
}

.edit-icon {
  @width: 12px;
  @height: 11px;
  &::before {
    .edit--icon(@width, @height, escape(@base));
  }
}

.triangle-right-icon {
  @width: 9px;
  @height: 12px;
  &::before {
    .triangle-right--icon(@width, @height, escape(@base));
  }
}

.triangle-down-icon {
  @width: 11px;
  @height: 8px;
  &::before {
    .triangle-down--icon(@width, @height, escape(@base));
  }
}

.triangle-left-icon {
  @width: 9px;
  @height: 12px;
  &::before {
    .triangle-left--icon(@width, @height, escape(@base));
  }
}

.triangle-up-icon {
  @width: 11px;
  @height: 8px;
  &::before {
    .triangle-up--icon(@width, @height, escape(@base));
  }
}

// ICONS CORE

.icon-base () {
  content: '';
  display: block;
  width: @width;
  height: @height;
  background-repeat: no-repeat;
  background-size: contain;
}

.user--icon(@width, @height, @fill) {
  .icon-base();
  background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1175 43 13 13'%3E%3Cpath d='M1181.5 49.5C1183.3 49.5 1184.8 48 1184.8 46.3 1184.8 44.5 1183.3 43 1181.5 43 1179.7 43 1178.3 44.5 1178.3 46.3 1178.3 48 1179.7 49.5 1181.5 49.5L1181.5 49.5ZM1181.5 51.1C1179.3 51.1 1175 52.2 1175 54.4L1175 56 1188 56 1188 54.4C1188 52.2 1183.7 51.1 1181.5 51.1L1181.5 51.1Z' fill='@{fill}'/%3E%3C/svg%3E")
}

.password--icon(@width, @height, @fill) {
  .icon-base();
  background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='16' viewBox='11 8 13 16'%3E%3Cpath d='M21.7 13.3L20.9 13.3 20.9 11.8C20.9 9.7 19.2 8 17.1 8 15 8 13.3 9.7 13.3 11.8L13.3 13.3 12.5 13.3C11.7 13.3 11 14 11 14.9L11 22.5C11 23.3 11.7 24 12.5 24L21.7 24C22.5 24 23.2 23.3 23.2 22.5L23.2 14.9C23.2 14 22.5 13.3 21.7 13.3L21.7 13.3ZM17.1 20.2C16.3 20.2 15.6 19.5 15.6 18.7 15.6 17.8 16.3 17.1 17.1 17.1 17.9 17.1 18.6 17.8 18.6 18.7 18.6 19.5 17.9 20.2 17.1 20.2L17.1 20.2ZM19.5 13.3L14.7 13.3 14.7 11.8C14.7 10.5 15.8 9.4 17.1 9.4 18.4 9.4 19.5 10.5 19.5 11.8L19.5 13.3 19.5 13.3Z' fill='@{fill}'/%3E%3C/svg%3E")
}

.edit--icon(@width, @height, @fill) {
  .icon-base();
  background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='169 20 12 11'%3E%3Cpath d='M169 28.7L169 31 171.3 31 177.9 24.2 175.6 21.9 169 28.7 169 28.7ZM179.6 22.4C179.9 22.2 179.9 21.8 179.6 21.6L178.2 20.2C178 19.9 177.6 19.9 177.4 20.2L176.3 21.3 178.6 23.6 179.6 22.4 179.6 22.4ZM174.4 29.8L173.2 31 181 31 181 29.8 174.4 29.8 174.4 29.8Z' fill='@{fill}'/%3E%3C/svg%3E")
}

.triangle-right--icon(@width, @height, @fill) {
  .icon-base();
  background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='273 828 9 12'%3E%3Cpolygon transform='translate%28277.5 834%29rotate%2890%29translate%28-277.5 -834%29' points='277.5 830 283 838 272 838' fill='@{fill}'/%3E%3C/svg%3E")
}

.triangle-down--icon(@width, @height, @fill) {
  .icon-base();
  background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='272 850 11 8'%3E%3Cpolygon transform='translate%28277.5 854%29rotate%28180%29translate%28-277.5 -854%29' points='277.5 850 283 858 272 858' fill='@{fill}'/%3E%3C/svg%3E")
}

.triangle-left--icon(@width, @height, @fill) {
  .icon-base();
  background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='253 848 9 12'%3E%3Cpolygon transform='translate%28257.5 854%29rotate%28270%29translate%28-257.5 -854%29' points='257.5 850 263 858 252 858' fill='@{fill}'/%3E%3C/svg%3E")
}

.triangle-up--icon(@width, @height, @fill) {
  .icon-base();
  background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='252 830 11 8'%3E%3Cpolygon points='257.5 830 263 838 252 838' fill='@{fill}'/%3E%3C/svg%3E")
}
